<template>
	<view class="wrap">
		<image src="/static/logo.png" class="logo" mode=""></image>
		<text class="logo-title">车搭档</text>
		<button class="one" open-type="getPhoneNumber" v-if="state" @getphonenumber="onPhoneNumber">一键登录</button>
		<button class="one" v-else @click="handleState">一键登录</button>
		<button class="two" @click="bindLoginPhone">手机号登录</button>
		<view class="footer">
			<image :src="state?'/static/l1.png':'/static/radio.png'" @click="state=!state" mode=""></image>
			<text @click="state=!state">我已认真阅读并同意</text>
			<text style="color:#FE9C24 ;">《用户协议》</text>
			<text>与</text>
			<text style="color:#FE9C24 ;">《隐私政策》</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		loginAuth
	} from '@/api'
	import {wxOpenid,checkLogin} from '@/utils/login-sdk.js'
	const user = uni.getStorageSync('wxuser')
	const state = ref(false)
	/** 获取手机号*/
	const onPhoneNumber = async (e)=>{
		const {openId} = await wxOpenid()
		const res = await  loginAuth({
			openId:openId,
			code:e.detail.code
		})
		user.jwt = res.result.data.jwt
		user.phone = res.result.data.phone
		user.memberId = res.result.data.memberId
		uni.setStorageSync('wxuser',user)
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	/** 手机号登录*/
	const bindLoginPhone = ()=>{
		uni.navigateTo({
			url:"/pages/loginPhone/loginPhone"
		})
	}
	/** 确认协议 */
	const handleState = ()=>{
		if (!state.value) {
			uni.showModal({
				title: '提示',
				content: '确认同意用户协议和隐私政策',
				success: (ret) => {
					if (ret.confirm) {
						state.value = true
					}
				}
			})
			return false
		}
	}
</script>

<style lang="scss">
	.wrap{
		margin-top: 140rpx;
		.logo{
			width: 218rpx;
			height: 218rpx;
			
			border-radius: 50%;
			display: block;
			margin: 0 auto 26rpx;
		}
		.logo-title{
			font-weight: bold;
			font-size: 40rpx;
			color: #16191B;
			line-height: 1;
			display: block;
			text-align: center;
			margin-bottom: 161rpx;
		}
		.one{
			width: 640rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
			box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254,155,35,0.25);
			border-radius: 28rpx;
			display: block;
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 100rpx;
		}
		.two{
			width: 640rpx;
			height: 100rpx;
			background: rgba(254,156,36,0.28);
			border-radius: 28rpx;
			font-size: 34rpx;
			color: #FE9C24;
			line-height: 100rpx;
			font-weight: bold;
			display: block;
			margin-top: 35rpx;
		}
		.footer{
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			justify-content: center;
			image{
				display: block;
				width: 48rpx;
				height: 48rpx;
			}
			text{
				color: #6E6E6E;
				font-size: 24rpx;
			}
		}
	}
</style>
